<template>
    <div class="relation-house">
        <!-- 头部 -->
         <mt-header fixed>
        <router-link to="/" slot="left">
    <mt-button icon="back">已联系家政人员</mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button>
      </mt-header>
      <!-- 内容部分 -->
      <div class="main-relation">
        <div class="with-to">
          <img src="https://www.jia-he-jia.com/template/pc/img/img-detail/mates_01.jpg" alt="">
        </div>
          <div class="first-conter" v-for="(item,index) in relationListOot" :key='index'>
            <div class="photo-left">
                <img :src="item.phot_for" alt="">
            </div>
            <div class="text-right">
               <div class="text-span">
                   <span>{{item.name}}</span>
                   <span>{{item.number}}</span>
               </div>
               <div class="jinyan">
                   <mt-badge size="small" color='#fff' class="bgc">二级育儿师</mt-badge>
                   <mt-badge size="small" color='#fff' class="bgc">6年从业经验</mt-badge>
                   <!-- <span></span>
                   <span>6年从业经验</span> -->
               </div>
               <div class="gongsi">
                   <p>湖南前海优家网络科技有限公司</p>
               </div>
            </div>
          </div>
          <!-- <div class="first-conter">
            <div class="photo-left">
                <img src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/c7b138d7c17c83772413f31bf610b20a_259_194.jpg" alt="">
            </div>
            <div class="text-right">
               <div class="text-span">
                   <span>陈佳</span>
                   <span>13974156231</span>
               </div>
               <div class="jinyan">
                   <mt-badge size="small" color='#fff' class="bgc">二级育儿师</mt-badge>
                   <mt-badge size="small" color='#fff' class="bgc">6年从业经验</mt-badge>
                  <span></span>
                   <span>6年从业经验</span> -->
               <!-- </div>
               <div class="gongsi">
                   <p>湖南前海优家网络科技有限公司</p>
               </div>
            </div> -->
          <!-- </div> -->
      </div>
    </div>
</template>

<script>
import { relationGet } from '@/api/relation.js'
export default {
  name: 'RelationHouse',
  data () {
    return {
      relationListOot: {}
    }
  },
  created () {
    this.createdGet()
  },
  methods: {
    async createdGet () {
      try {
        const { data } = await relationGet()
        console.log(data)
        this.relationListOot = data.data
        console.log(this.relationListOot)
      } catch (err) {
        console.log('获取失败', err)
      }
    }
  }

}
</script>

<style lang="less" scoped>
.relation-house{
    width: 100%;
}
/deep/.mint-header,.is-fixed{
  height: 128px;
  background-color:#1196db;
 .mint-button-text{
    font-size: 32px;
    vertical-align: middle;
  }
  .mint-button-icon,.mintui{
    font-size: 40px;
  }
}
.main-relation{
    width: 100%;
    margin-top: 128px;
    background-color:#f5f7f9;
    .first-conter{
    display: flex;
    justify-content: flex-start;
    padding: 34px 32px 34px 32px;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 20px;
    box-shadow: 4px 4px  4px #f5f7f9;
    .photo-left{
        width: 260px;
        height: 164px;
        background-color: pink;
        margin-right: 32px;
        box-sizing: border-box;
        img{
            width: 100%;
            height: 100%;
        }
    }
    }
}
/deep/.text-right{
    width: 100%;
    display: flex;
    // justify-content: space-between;
    flex-direction: column;
    align-content: space-between;
     .text-span{
        display: flex;
        justify-content: space-between;
        font-size: 28px;
     }
     .jinyan{

    //   span {
    //     display: inline-block;
    //     border: 1px solid #3F51B5;
    //     border-radius: 30%;
    //     font-size: 20px;
    //     color: #3F51B5;
    //     margin-right: 20px;
    //     padding: 10px;
    //   }
    .bgc{
         border: 1px solid #3F51B5;
         font-size: 20px;
        color: #3F51B5;
        margin-top: 26px;
         margin-right: 15px;
         line-height: 20px;
    }
     }
     .gongsi{
       display: inline-block;
         font-size: 24px;
         margin: 0px;
         padding: 0px;
     }
    }
    /deep/.mint-badge.is-size-small {
    border-radius: 1.10667rem;
    padding: 5px;
    }
    .with-to {
      width: 100%;
      height: 300px;
      img{
        width: 100%;
        height: 100%;
      }
    }
</style>
